<template>
    <div class="music-item">
        <div class="music-title">
            <div class="title-name"><slot></slot></div>
            <div class="clock-more">更多新歌</div>
        </div>
        <div class="songs-list">
            <van-swipe :show-indicators="false">
                <van-swipe-item>
                    <ul class="music-list">
                        <li v-for="item in listInfo.newSongs1" :key="item.id">
                            <div class="song-item">
                                <div class="song-item-info">
                                    <div class="song-img">
                                        <img :src="item.picUrl"  v-lazy="item.picUrl" alt="">
                                    </div>
                                    <div class="song-info">
                                        <div class="song-name">
                                            <span>{{item.name}}</span> 
                                            <span class="song-author" v-if="item.song.artists">- {{item.song.artists[0].name}}</span>
                                        </div>
                                        <div class="song-album">{{item.song.album.name}}</div>
                                    </div>
                                </div>
                                <div class="song-play"><i class="iconfont">&#xe64f;</i></div>
                            </div>
                        </li>
                    </ul>
                </van-swipe-item>
                <van-swipe-item>
                    <ul class="music-list">
                        <li v-for="item in listInfo.newSongs2" :key="item.id">
                            <div class="song-item">
                                <div class="song-item-info">
                                    <div class="song-img">
                                        <img :src="item.picUrl"  v-lazy="item.picUrl" alt="">
                                    </div>
                                    <div class="song-info">
                                        <div class="song-name">
                                            <span>{{item.name}}</span> 
                                            <span class="song-author" v-if="item.song.artists">- {{item.song.artists[0].name}}</span>
                                        </div>
                                        <div class="song-album">{{item.song.album.name}}</div>
                                    </div>
                                </div>
                                <div class="song-play"><i class="iconfont">&#xe64f;</i></div>
                            </div>
                        </li>
                    </ul>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>
<script>
export default {
    name:'songListItem',
    props:{
        listInfo:{
            type:Object,
            default:{}
        }
    }
}
</script>
<style lang="less" scoped>
    .songs-list{
        .music-list{
            li{
                margin: 20px 0px;
                .song-item{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .song-item-info{
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        .song-img{
                            width: 100px;
                            height: 100px;
                            border-radius: 10px;
                            margin-right: 20px;
                            img{
                                width: 100%;
                                border-radius: 10px;
                            }
                        }
                        .song-info{
                            .song-name{
                                span{
                                    display: inline-block;
                                    font-size: 28px;
                                        color: #000;
                                        &.song-author{
                                            font-size: 22px;
                                            color: #c5c5c5;
                                        }
                                }
                            }
                            .song-album{
                                margin-top:8px;
                                font-size: 20px;
                                color: @color3;
                            }
                        }
                    }
                    .song-play{
                        margin-right: 20px;
                        .iconfont{
                            font-size: 52px;
                        }
                    }
                }
            }
        }
    }
</style>